<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务/医院</title>
</head>
<body>
    <div id="content">
        <!--modal box-->
        <div class="modal fade" id="provider-info">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title"><b class="text-primary">{{ business_provider.name }}</b> 详细信息</h3>
                        <button type="button" class="close" data-dismiss="modal" @click="reset_info">&times;</button>
                    </div>
                    <div class="modal-body card">
                        <div class="card-body">
                            <h5>{{ business_provider.description }}</h5>
                            <h6 class="text-info">拥有服务：</h6>

                            <kbd class="bg-success" v-for="business in business_provider.businesses" :key="business.id">{{ business.name }}</kbd>

                            <h6><b class="text-info">城市：</b>{{ business_provider.city }}</h6>
                            <h6><b class="text-info">位置：</b>{{ business_provider.location }}</h6>
                            <h6><b class="text-info">电话：</b>{{ business_provider.phoneNumber }}</h6>
                            <a href="#" class="btn btn-primary" v-show="is_logged_in" @Click="reservation">&ensp;{{ reservation_text }}&ensp;</a>
                        </div>
                    </div>
                    <div class="modal-footer">
                        @宠物之家
                    </div>
                </div>
            </div>
        </div>
        <!--page-->
        <div id="business-data-box">
            <h3 class="text-secondary">宠物服务/医院</h3>
            <div class="table-responsive">
                <table class="table table-light table-striped table-sm text-center">
                    <thead class="thead-dark">
                    <tr>
                        <th>名称</th>
                        <th>地址</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="provider in business_providers" :key="provider.id">
                        <td>{{ provider.name }}</td>
                        <td>{{ provider.location }}</td>
                        <td><button class="btn btn-sm btn-link border-0 btn-secondary" data-toggle="modal"
                                    data-target="#provider-info" @click="render_modal_box(provider.id)">查看详情</button></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!--search box-->
            <div class="form-inline">
                <div class="input-group-sm">
                    <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(page_index-1)">上一页</button>
                    第{{page_index}}页，共{{page_num}}页
                    <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(page_index+1)">下一页</button>
                    <kbd>To</kbd>：
                    <input type="text" class="form-control" style="width: 3rem;" v-model="go">
                    <button class="btn btn-link border-0 btn-info"  @Click="get_paging_data(go)">Go</button>
                    <kbd>检索</kbd>
                    &ensp;城市&ensp;
                    <input type="text" class="form-control text-info" style="width: 6rem;" v-model="pointed_city">
                    &ensp;服务&ensp;
                    <select class="form-control option" v-model="pointed_business_id">
                        <option v-for="business in businesses" :value="business.id">
                            {{ business.name }}
                        </option>
                    </select>
                </div>
                <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(0)">搜索</button>
                <button class="btn btn-link border-0 btn-secondary" @Click="reset_search">重置</button>
            </div>
        </div>
    </div>
</body>
</html>